/*
 * @Author: chengsl
 * @Date: 2022-12-07 17:17:40
 * @LastEditors: chengsl
 * @LastEditTime: 2023-04-18 19:11:44
 * @Descripttion: 表格布局
 * 注意: 搜索框的盒子需要设置ref=header
 * 页码容器需要设置ref=page-bar
 * 页面父盒子需要设置ref=wrap
 */
import { ref, nextTick, getCurrentInstance } from 'vue'
export function useLayoutTable(fatherDomRefName, marginHeigth, tableRefName = 'table') {
	const that = getCurrentInstance(); // 获取内部组件实例 ≈ vue2的 this
	// console.log('that----', that)

	const tableHeight = ref() // 表格内容高度

	/**
	 * 对表格重新布局，解决特殊情况下表格错位的问题
	 * @param tableRefName
	 */
	const layoutTable = ref(async function(){
		await nextTick()
		that.refs[tableRefName].doLayout()
	})

	/**
	 * 监听窗口变化，动态设置表格高度
	 * @param {*} fatherDomRefName table 父节点 dom 的 ref 的名字
	 * @param {*} marginHeigth 多余的要减去的高度
	 */
	const resizeTableHeight = ref(async function(){
		setTableHeight()
		const elementResizeDetectorMaker = require('element-resize-detector') // 监听元素长宽变化的插件
		const listener = elementResizeDetectorMaker()
		listener.listenTo(that.refs[fatherDomRefName || 'wrap'], () => {
			setTableHeight(fatherDomRefName, marginHeigth || 10)
		})
	})

	/**
	 * 计算表格自适应高度
	 */
	const setTableHeight = async function() {
		await nextTick()
			const wrap = that.refs[fatherDomRefName || 'wrap']
			if (!wrap) return
			const pageBar = that.refs['pageBar']
			const header = that.refs['header']

			const wrapHeight = wrap.offsetHeight // 容器总高度
			const headerHeight = header ? header.offsetHeight : 0 // 头部高度
			const pageBarHeight = pageBar ? pageBar.offsetHeight : 0 // 分页组件高度
			tableHeight.value = wrapHeight - headerHeight - pageBarHeight - marginHeigth || 10 // 计算表格高度
			layoutTable.value()
	}

	return { tableHeight, layoutTable, resizeTableHeight }
}

